<template>
  <div class="manage">
    <div class="block">
      <el-card class="box-card" :body-style="{backgroundColor: '#fafafa' }">
        <div slot="header" class="box-head">
          <span class="m-title">管理页面</span>
        </div>
        <el-row>
          <el-col :span="3">
            <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#354e66" text-color="#fff"
                     active-text-color="#f9bf4b" @select="select" :default-active="index">
              <el-menu-item index="1">
                <i class="el-icon-s-check"></i>
                <span slot="title">审核管理</span>
              </el-menu-item>
              <el-menu-item index="2">
                <i class="el-icon-s-custom"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
              <el-menu-item index="3">
                <i class="el-icon-share"></i>
                <span slot="title">文章管理</span>
              </el-menu-item>
              <el-menu-item index="4">
                <i class="el-icon-s-order"></i>
                <span slot="title">题目管理</span>
              </el-menu-item>
              <el-menu-item index="5">
                <i class="el-icon-edit"></i>
                <span slot="title">记录管理</span>
              </el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="21">
            <div class="box-body">
              <div v-show="show1">
                <el-table class="c-tab1" :data="this.articles" :row-style="{height: '40px'}" :cell-style="{padding: '0'}"
                          header-align="center" stripe>
                  <el-table-column type="index" :index="index1" min-width="5%" align="center"></el-table-column>
                  <el-table-column prop="arid" label="文章id" min-width="8%" show-overflow-tooltip align="center"></el-table-column>
                  <el-table-column prop="title" label="标题" min-width="15%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="cont" label="内容" min-width="20%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="auid" label="作者" min-width="8%" align="center"></el-table-column>
                  <el-table-column prop="time" label="时间" min-width="10%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <!--el-table-column prop="stat" label="状态" min-width="8%" align="center" :formatter="fmstat1"></el-table-column-->
                  <el-table-column prop="type" label="类型" min-width="8%" align="center" :formatter="fmtype1"></el-table-column>
                  <el-table-column prop="control" min-width="15%" align="center">
                    <template slot="header" slot-scope="scope">
                      <el-input v-model="search" size="small" placeholder="输入关键字搜索">
                        <el-button slot="append" size="small" icon="el-icon-search" @click="page1(1, search)"></el-button>
                      </el-input>
                    </template>
                    <template slot-scope="scope">
                      <el-popconfirm title="确认该文章审核通过？" @confirm="updata1(scope.row, 1)">
                        <el-button slot="reference" size="mini">通过</el-button>
                      </el-popconfirm>
                      <el-popconfirm class="right-button" title="确认该文章审核失败？" @confirm="updata1(scope.row, 2)">
                        <el-button slot="reference" size="mini" type="danger">失败</el-button>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination class="pag" layout="sizes, prev, pager, next, jumper" :total="this.total1" @current-change="page1"
                               :page-sizes="[10, 20, 50, 100]" :page-size="10" @size-change="change1">
                </el-pagination>
              </div>
              <div v-show="show2">
                <el-table class="c-tab2" :data="this.users" :row-style="{height: '40px'}" :cell-style="{padding: '0'}"
                          header-align="center" stripe>
                  <el-table-column type="index" :index="index2" min-width="5%" align="center">
                    <template slot="header">
                      <el-button size="mini" icon="el-icon-plus" circle @click="show2_1 = true"></el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="id" label="账号" min-width="10%" show-overflow-tooltip align="center"></el-table-column>
                  <el-table-column prop="name" label="名称" min-width="20%" align="center"></el-table-column>
                  <el-table-column prop="tel" label="手机号" min-width="15%" align="center"></el-table-column>
                  <el-table-column prop="pwd" label="密码" min-width="20%" align="center"></el-table-column>
                  <el-table-column prop="type" label="类型" min-width="10%" align="center" :formatter="fmtype2"></el-table-column>
                  <el-table-column prop="type" min-width="20%" align="center">
                    <template slot="header" slot-scope="scope">
                      <el-input v-model="search" size="small" placeholder="输入关键字搜索">
                        <el-button slot="append" size="small" icon="el-icon-search" @click="page2(1, search)"></el-button>
                      </el-input>
                    </template>
                    <template slot-scope="scope">
                      <el-button size="mini" @click="updatachoose2(scope.row)">修改</el-button>
                      <el-popconfirm class="right-button" title="确认删除该用户？" @confirm="delete2(scope.row)">
                        <el-button slot="reference" size="mini" type="danger">删除</el-button>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination class="pag" layout="sizes, prev, pager, next, jumper" :total="this.total2" @current-change="page2"
                               :page-sizes="[10, 20, 50, 100]" :page-size="10" @size-change="change2">
                </el-pagination>
              </div>
              <div v-show="show3">
                <el-table class="c-tab3" :data="this.articles" :row-style="{height: '40px'}" :cell-style="{padding: '0'}"
                          header-align="center" stripe>
                  <el-table-column type="index" :index="index3" min-width="5%" align="center">
                    <template slot="header">
                      <el-button size="mini" icon="el-icon-plus" circle @click="show3_1 = true"></el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="arid" label="文章id" min-width="10%" show-overflow-tooltip align="center"></el-table-column>
                  <el-table-column prop="title" label="标题" min-width="15%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="cont" label="内容" min-width="20%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="auid" label="作者id" min-width="10%" align="center"></el-table-column>
                  <el-table-column prop="time" label="时间" min-width="10%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <!--el-table-column prop="stat" label="状态" min-width="8%" align="center" :formatter="fmstat3"></el-table-column-->
                  <el-table-column prop="type" label="类型" min-width="8%" align="center" :formatter="fmtype3"></el-table-column>
                  <el-table-column prop="control" min-width="15%" align="center">
                    <template slot="header" slot-scope="scope">
                      <el-input v-model="search" size="small" placeholder="输入关键字搜索">
                        <el-button slot="append" size="small" icon="el-icon-search" @click="page3(1, search)"></el-button>
                      </el-input>
                    </template>
                    <template slot-scope="scope">
                      <el-button size="mini" @click="updatachoose3(scope.row)">修改</el-button>
                      <el-popconfirm class="right-button" title="确认删除该文章？" @confirm="delete3(scope.row)">
                        <el-button slot="reference" size="mini" type="danger">删除</el-button>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination class="pag" layout="sizes, prev, pager, next, jumper" :total="this.total3" @current-change="page3"
                               :page-sizes="[10, 20, 50, 100]" :page-size="10" @size-change="change3">
                </el-pagination>
              </div>
              <div v-show="show4">
                <el-table class="c-tab4" :data="this.questions" :row-style="{height: '40px'}" :cell-style="{padding: '0'}"
                          header-align="center" stripe>
                  <!--el-table-column type="expand" align="center">
                    <template slot-scope="props">
                      <el-form label-position="right" class="demo-table-expand">
                        <el-form-item label="题目id">
                          <span>{{ props.row.id }}</span>
                        </el-form-item>
                        <el-form-item label="题目内容">
                          <span>{{ props.row.cont }}</span>
                        </el-form-item>
                        <el-form-item label="选项类型">
                          <span>{{ props.row.otype }}</span>
                        </el-form-item>
                        <el-form-item label="选项1">
                          <span>{{ props.row.op1 }}</span>
                        </el-form-item>
                        <el-form-item label="选项2">
                          <span>{{ props.row.op2 }}</span>
                        </el-form-item>
                        <el-form-item label="选项3">
                          <span>{{ props.row.op3 }}</span>
                        </el-form-item>
                        <el-form-item label="选项4">
                          <span>{{ props.row.op4 }}</span>
                        </el-form-item>
                        <el-form-item label="答案">
                          <span>{{ props.row.ans }}</span>
                        </el-form-item>
                      </el-form>
                    </template>
                  </el-table-column-->
                  <el-table-column type="index" :index="index4" min-width="5%" align="center">
                    <template slot="header">
                      <el-button size="mini" icon="el-icon-plus" circle @click="show4_1 = true"></el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="id" label="题目id" min-width="8%" show-overflow-tooltip align="center"></el-table-column>
                  <el-table-column prop="cont" label="题目内容" min-width="15%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <!--el-table-column prop="qtype" label="题目类型" min-width="10%" align="center"></el-table-column-->
                  <el-table-column prop="otype" label="选项类型" min-width="10%" align="center" :formatter="fmtype4"></el-table-column>
                  <el-table-column prop="op1" label="选项1" min-width="8%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="op2" label="选项2" min-width="8%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="op3" label="选项3" min-width="8%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="op4" label="选项4" min-width="8%" align="center" :show-overflow-tooltip="true"></el-table-column>
                  <el-table-column prop="ans" label="答案" min-width="5%" align="center"></el-table-column>
                  <el-table-column prop="control" min-width="15%" align="center">
                    <template slot="header" slot-scope="scope">
                      <el-input v-model="search" size="small" placeholder="输入关键字搜索">
                        <el-button slot="append" size="small" icon="el-icon-search" @click="page4(1, search)"></el-button>
                      </el-input>
                    </template>
                    <template slot-scope="scope">
                      <el-button size="mini" @click="updatachoose4(scope.row)">修改</el-button>
                      <el-popconfirm class="right-button" title="确认删除该题目？" @confirm="delete4(scope.row)">
                        <el-button slot="reference" size="mini" type="danger">删除</el-button>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination class="pag" layout="sizes, prev, pager, next, jumper" :total="this.total4" @current-change="page4"
                               :page-sizes="[10, 20, 50, 100]" :page-size="10" @size-change="change4">
                </el-pagination>
              </div>
              <div v-show="show5">
                <el-table class="c-tab5" :data="this.records" :row-style="{height: '40px'}" :cell-style="{padding: '0'}"
                          header-align="center" stripe>
                  <el-table-column type="index" :index="index5" min-width="5%" align="center">
                    <template slot="header">
                      <el-button size="mini" icon="el-icon-plus" circle @click="show5_1 = true"></el-button>
                    </template>
                  </el-table-column>
                  <el-table-column prop="id" label="记录id" min-width="15%" align="center"></el-table-column>
                  <el-table-column prop="uid" label="账号" min-width="15%" align="center"></el-table-column>
                  <el-table-column prop="qid" label="题目id" min-width="15%" align="center"></el-table-column>
                  <el-table-column prop="res" label="结果" min-width="15%" align="center" :formatter="fmres5"></el-table-column>
                  <el-table-column prop="control" min-width="15%" align="center">
                    <template slot="header" slot-scope="scope">
                      <el-input v-model="search" size="small" placeholder="输入关键字搜索">
                        <el-button slot="append" size="small" icon="el-icon-search" @click="page5(1, search)"></el-button>
                      </el-input>
                    </template>
                    <template slot-scope="scope">
                      <el-button size="mini" @click="updatachoose5(scope.row)">修改</el-button>
                      <el-popconfirm class="right-button" title="确认删除该记录？" @confirm="delete5(scope.row)">
                        <el-button slot="reference" size="mini" type="danger">删除</el-button>
                      </el-popconfirm>
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination class="pag" layout="sizes, prev, pager, next, jumper" :total="this.total5" @current-change="page5"
                               :page-sizes="[10, 20, 50, 100]" :page-size="10" @size-change="change5">
                </el-pagination>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <el-dialog title="添加用户" :visible.sync="show2_1" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false" width="30%" top="10%" center>
      <el-form label-width="100px" :model="user_a" ref="user_a" :rules="rules2_1">
        <el-form-item class="name-box" label="用户名：" prop="name">
          <el-input class="name-input" v-model="user_a.name" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item class="tel-box" label="手机号：" prop="tel">
          <el-input class="tel-input" v-model="user_a.tel" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item class="pwd-box" label="密码：" prop="pwd">
          <el-input class="pwd-input" v-model="user_a.pwd" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item class="type-box" label="类型：">
          <el-switch v-model="user_a.type" active-text="管理员" inactive-text="普通用户" active-value="1" inactive-value="0">
        </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show2_1 = false">取 消</el-button>
        <el-button type="primary" @click="add2">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改用户" :visible.sync="show2_2" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="30%" top="10%" center>
      <el-form label-width="100px" :model="user_u" ref="user_u" :rules="rules2_2">
        <el-form-item class="id-box" label="账号：" prop="id">
          <el-input class="name-input" v-model="user_u.id" maxlength="10" disabled></el-input>
        </el-form-item>
        <el-form-item class="name-box" label="用户名：" prop="name">
          <el-input class="name-input" v-model="user_u.name" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item class="tel-box" label="手机号：" prop="tel">
          <el-input class="tel-input" v-model="user_u.tel" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item class="pwd-box" label="密码：" prop="pwd">
          <el-input class="pwd-input" v-model="user_u.pwd" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item class="type-box" label="类型：">
          <el-switch v-model="user_u.type" active-text="管理员" inactive-text="普通用户" :active-value="1" :inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatacancel2">取 消</el-button>
        <el-button type="primary" @click="updata2">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加文章" :visible.sync="show3_1" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false" width="60%" top="8%" center>
      <el-form label-width="100px" :model="article_a" ref="article_a" :rules="rules3_1">
        <el-form-item label="文章标题：" prop="title" >
          <el-input v-model="article_a.title" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="文章内容：" prop="cont" >
          <el-input v-model="article_a.cont" type="textarea" :autosize="{ minRows: 10}"></el-input>
        </el-form-item>
        <el-form-item label="文章类型：" prop="type">
          <el-select v-model="article_a.type" placeholder="请选择">
              <el-option label="防诈知识" :value="1"></el-option>
              <el-option label="真实案例" :value="2"></el-option>
              <el-option label="用户分享" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show3_1 = false">取 消</el-button>
        <el-button type="primary" @click="add3">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改文章" :visible.sync="show3_2" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="70%" top="5%" center>
      <el-form label-width="100px" :model="article_u" ref="article_u" :rules="rules3_2">
        <el-form-item label="文章id：" prop="arid" >
          <el-input v-model="article_u.arid" disabled></el-input>
        </el-form-item>
        <el-form-item label="文章标题：" prop="title" >
          <el-input v-model="article_u.title" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="文章内容：" prop="cont" >
          <el-input v-model="article_u.cont" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="作者id：" prop="auid" >
          <el-input v-model="article_u.auid"></el-input>
        </el-form-item>
        <el-form-item label="文章时间：" prop="time" >
          <el-date-picker v-model="article_u.time" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"> </el-date-picker>
        </el-form-item>
        <el-form-item label="文章类型：" prop="type">
          <el-select v-model="article_u.type" placeholder="请选择">
            <el-option label="防诈知识" :value="1"></el-option>
            <el-option label="真实案例" :value="2"></el-option>
            <el-option label="用户分享" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatacancel3">取 消</el-button>
        <el-button type="primary" @click="updata3">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加题目" :visible.sync="show4_1" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false" width="40%" top="5%" center>
      <el-form label-width="100px" :model="question_a" ref="question_a" :rules="rules4_1">
        <el-form-item label="题目内容：" prop="cont" >
          <el-input v-model="question_a.cont" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="选项类型：" prop="otype">
          <el-switch v-model="question_a.otype" active-text="多选题" inactive-text="单选题" active-value="2" inactive-value="1">
          </el-switch>
        </el-form-item>
        <el-form-item label="选项1：" prop="op1">
          <el-input v-model="question_a.op1" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="选项2：" prop="op2">
          <el-input v-model="question_a.op2" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="选项3：" prop="op3">
          <el-input v-model="question_a.op3" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="选项4：" prop="op4">
          <el-input v-model="question_a.op4" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="答案：" prop="ans">
          <el-input v-model="question_a.ans"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show4_1 = false">取 消</el-button>
        <el-button type="primary" @click="add4">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改题目" :visible.sync="show4_2" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="40%" top="5%" center>
      <el-form label-width="100px" :model="question_u" ref="question_u" :rules="rules4_2">
        <el-form-item label="题目id：" prop="id" >
          <el-input v-model="question_u.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="题目内容：" prop="cont" >
          <el-input v-model="question_u.cont" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="选项类型：" prop="otype">
          <el-switch v-model="question_u.otype" active-text="多选题" inactive-text="单选题" :active-value="2" :inactive-value="1">
          </el-switch>
        </el-form-item>
        <el-form-item label="选项1：" prop="op1">
          <el-input v-model="question_u.op1" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="选项2：" prop="op2">
          <el-input v-model="question_u.op2" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="选项3：" prop="op3">
          <el-input v-model="question_u.op3" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="选项4：" prop="op4">
          <el-input v-model="question_u.op4" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="答案：" prop="ans">
          <el-input v-model="question_u.ans"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatacancel4">取 消</el-button>
        <el-button type="primary" @click="updata4">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加记录" :visible.sync="show5_1" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :show-close="false" width="30%" top="12%" center>
      <el-form label-width="100px" :model="record_a" ref="record_a" :rules="rules5_1">
        <el-form-item label="用户id：" prop="uid">
          <el-input v-model="record_a.uid" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="题目id：" prop="qid">
          <el-input v-model="record_a.qid" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="结果：">
          <el-switch v-model="record_a.res" active-text="正确" inactive-text="错误" active-value="1" inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show5_1 = false">取 消</el-button>
        <el-button type="primary" @click="add5">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改记录" :visible.sync="show5_2" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="30%" top="10%" center>
      <el-form label-width="100px" :model="record_u" ref="record_u" :rules="rules5_2">
        <el-form-item label="记录id：" prop="id">
          <el-input v-model="record_u.uid" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="用户id：" prop="uid">
          <el-input v-model="record_u.uid" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="题目id：" prop="qid">
          <el-input v-model="record_u.qid" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="结果：">
          <el-switch v-model="record_u.res" active-text="正确" inactive-text="错误" active-value="1" inactive-value="0">
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updatacancel5">取 消</el-button>
        <el-button type="primary" @click="updata5">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
import moment from "moment";
import article from "@/views/Article/Article";

export default {
  data() {
    let ctel = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空！'));
      } else if (!Number.isInteger(value / 1)) {
        callback(new Error('请输入正确的手机号格式！'));
      } else if (value < 10000000000) {
        callback(new Error('手机号不足11位！'));
      }
      callback();
    };
    return {
      user: {},
      index: '1',
      audit: [],
      search: "",
      users: [],
      user_a: {},
      user_u: {
        id: '',
        name: '',
        tel: '',
        pwd: '',
        type: 1
      },
      user_p: {},
      articles: [],
      article_a: {},
      article_u: {
        arid: '',
        title: '',
        cont: '',
        auid: '',
        time: '',
        type: '',
      },
      questions: [],
      question_a: {},
      question_u: {
        id: '',
        cont: '',
        otype: 1,
        op1: '',
        op2: '',
        op3: '',
        op4: '',
        ans: '',
      },
      records: [],
      record_a: {},
      record_u: {
        id: '',
        uid: '',
        qid: '',
        res: '',
      },
      rules2_1: {
        name: [
          {required: true, message: '用户名不能为空！', trigger: 'blur'},
        ],
        tel: [
          {required: true, validator: ctel, trigger: 'blur'},
        ],
        pwd: [
          {required: true, message: '密码不能为空！', trigger: 'blur'},
        ]
      },
      rules2_2: {
        name: [
          {required: true, message: '用户名不能为空！', trigger: 'blur'},
        ],
        tel: [
          {required: true, validator: ctel, trigger: 'blur'},
        ],
        pwd: [
          {required: true, message: '密码不能为空！', trigger: 'blur'},
        ]
      },
      rules3_1: {
        title: [
          {required: true, message: '标题不能为空！', trigger: 'blur'},
        ],
        cont: [
          {required: true, message: '内容不能为空！', trigger: 'blur'},
        ],
        type: [
          {required: true, message: '文章类型不能为空！', trigger: 'blur'},
        ],
      },
      rules3_2: {
        title: [
          {required: true, message: '标题不能为空！', trigger: 'blur'},
        ],
        cont: [
          {required: true, message: '内容不能为空！', trigger: 'blur'},
        ],
        auid: [
          {required: true, message: '作者id不能为空！', trigger: 'blur'}
        ],
        time: [
          {required: true, message: '时间不能为空！', trigger: 'blur'}
        ],
        type: [
          {required: true, message: '文章类型不能为空！', trigger: 'blur'},
        ],
      },
      rules4_1: {
        cont: [
          {required: true, message: '内容不能为空！', trigger: 'blur'},
        ],
        op1: [
          {required: true, message: '选项不能为空！', trigger: 'blur'},
        ],
        op2: [
          {required: true, message: '选项不能为空！', trigger: 'blur'},
        ],
        ans: [
          {required: true, message: '答案不能为空！', trigger: 'blur'},
        ],
      },
      rules4_2: {
        cont: [
          {required: true, message: '内容不能为空！', trigger: 'blur'},
        ],
        op1: [
          {required: true, message: '选项不能为空！', trigger: 'blur'},
        ],
        op2: [
          {required: true, message: '选项不能为空！', trigger: 'blur'},
        ],
        ans: [
          {required: true, message: '答案不能为空！', trigger: 'blur'},
        ],
      },
      rules5_1: {
        uid: [
          {required: true, message: '用户id不能为空！', trigger: 'blur'},
        ],
        qid: [
          {required: true, message: '题目id不能为空！', trigger: 'blur'},
        ]
      },
      rules5_2: {
        uid: [
          {required: true, message: '用户id不能为空！', trigger: 'blur'},
        ],
        qid: [
          {required: true, message: '题目id不能为空！', trigger: 'blur'},
        ]
      },
      show1: true,
      show2: false,
      show2_1: false,
      show2_2: false,
      show3: false,
      show3_1: false,
      show3_2: false,
      show4: false,
      show4_1: false,
      show4_2: false,
      show5: false,
      show5_1: false,
      show5_2: false,
      num1: 1,
      total1: '',
      size1: 10,
      num2: 1,
      total2: '',
      size2: 10,
      num3: 1,
      total3: '',
      size3: 10,
      num4: 1,
      total4: '',
      size4: 10,
      num5: 1,
      total5: '',
      size5: 10,
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      if (!sessionStorage.getItem("user")) { //判断是否登录
        this.$message({
          showClose: true,
          type: 'error',
          message: '您还未登录，请先登录！'
        });
        // 返回错误信息
        this.$router.push("/login") // 跳转登录页面
      } else { // 已登录
        this.user = JSON.parse(sessionStorage.getItem("user")) // 获取登录信息
        axios.get("api/user/info/admin", {
          params: {
            id: this.user.id,
            name: this.user.name,
            tel: this.user.tel,
            pwd: this.user.pwd,
          }
        }).then((res) => { // 向后端请求查询信息
          if (res.data.code !== '0') {
            // 判断后端返回信息是否是管理员
            this.$message({
              showClose: true,
              type: "error",
              message: "已登陆账号不是管理员！",
            })
            // 显示错误消息
            this.$router.push("/") // 跳转主页面
          }
        })
      }
      this.change1(10)
      // 设置初始页面大小
    },
    select(key) {
      if (this.index !== key) {
        this.show1 = false
        this.show2 = false
        this.show3 = false
        this.show4 = false
        this.show5 = false
        this.search = ""
        if (key === '1') {
          this.show1 = true
          this.change1(10)
        } else if (key === '2') {
          this.show2 = true
          this.change2(10)
        } else if (key === '3') {
          this.show3 = true
          this.change3(10)
        } else if (key === '4') {
          this.show4 = true
          this.change4(10)
        } else if (key === '5') {
          this.show5 = true
          this.change5(10)
        }
        this.index = key
      }
    },
    getCurrentDate() {
      let now = new Date();
      let yyyy = now.getFullYear();
      let MM = now.getMonth() + 1;
      let dd = now.getDate();
      let HH = now.getHours();
      let mm = now.getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      let ss = now.getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
      return yyyy + "-" + MM + "-" + dd + " " + HH + ":" + mm + ":" + ss;
    },

    index1(index) {
      return this.size1 * (this.num1 - 1) + index + 1
    },
    change1(size) {
      this.size1 = size
      axios.get("api/article/info/stat", {
        params: {
          size: size
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.articles = res.data.data.records
          this.total1 = res.data.data.total
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "文章信息获取失败！",
          })
        }
      })
    },
    page1(currentPage, str = null) {
      axios.get("api/article/info/stat", {
        params: {
          size: this.size1,
          num: currentPage,
          str: str,
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.articles = res.data.data.records
          this.num1 = currentPage
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "文章信息获取失败！",
          })
        }
      })
      if(str != null) {
        this.search = ""
      }
    },
    fmstat1(row) {
      if (row.stat === 0) {
        return "待审核"
      } else if (row.stat === 1) {
        return "审核通过"
      } else if (row.stat === 2) {
        return "审核失败"
      }
    },
    fmtype1(row) {
      if (row.type === 1) {
        return "防诈知识"
      } else if (row.type === 2) {
        return "真实案例"
      } else if (row.type === 3) {
        return "用户分享"
      }
    },
    updata1(row, stat){
      axios.put("api/article", qs.stringify({
        /*id: this.user.id,
        name: this.user.name,
        tel: this.user.tel,
        pwd: this.user.pwd,*/
        arid: row.arid,
        title: row.title,
        cont: row.cont,
        auid: row.auid,
        stat: stat,
        type: row.type,
      })).then((res) => {
        if(res.data.code === '0') {
          this.$message({
            showClose: true,
            type: "success",
            message: "审核成功！",
          })
          setTimeout(() => {this.page1(this.num1)}, 1000);
        }
        else{
          this.$message({
            showClose: true,
            type: "error",
            message: res.data.msg,
          })
        }
      })
    },

    index2(index) {
      return this.size2 * (this.num2 - 1) + index + 1
    },
    fmtype2(row) {
      if (row.type === 0) {
        return "普通用户"
      } else if (row.type === 1) {
        return "管理员"
      } else if (row.type === 2)  {
        return "高级管理员"
      }
    },
    change2(size) {
      this.size2 = size
      axios.get("api/user/info/page", {
        params: {
          size: size
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.users = res.data.data.records
          this.total2 = res.data.data.total
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "用户信息获取失败！",
          })
        }
      })
    },
    page2(currentPage, str = null) {
      axios.get("api/user/info/page", {
        params: {
          size: this.size2,
          num: currentPage,
          str: str,
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.users = res.data.data.records
          this.num2 = currentPage
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "用户信息获取失败或搜索失败！",
          })
        }
      })
      if(str != null) {
        this.search = ""
      }
    },
    add2() {
      this.$refs["user_a"].validate((valid) => {
        if (valid) {
          axios.post("api/user/admin", qs.stringify({
            id: this.user.id,
            name: this.user.name,
            tel: this.user.tel,
            pwd: this.user.pwd,
            name2: this.user_a.name,
            tel2: this.user_a.tel,
            pwd2: this.user_a.pwd,
            type2: this.user_a.type,
          })).then((res) => {
            console.log(res.data)
            if(res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "添加用户成功！",
              })
              this.total2 += 1
              this.show2_1 = false
              setTimeout(() => {this.page2(this.num2)}, 1000);
            }
            else{
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg,
              })
            }
          })
        }
      })
    },
    delete2(row) {
      axios.delete("api/user/admin",{
        // 管理员后端专用url
        params: {
          id: this.user.id,
          name: this.user.name,
          tel: this.user.tel,
          pwd: this.user.pwd,
          id2: row.id,
        }
      }).then((res) => { // 向后端请求删除用户
        if(res.data.code === '0') {
          // 后端请求数据成功
          this.$message({
            showClose: true,
            type: "success",
            message: "删除用户成功！",
          })
          // 显示删除成功消息
          this.total2 -= 1 // 与分页相关，总用户数减一
          if((this.total2 / 10) === this.num2 - 1){
            this.num2 -= 1
          } // 与分页相关，若删除的为该页最后一项数据，页面往前一页
          setTimeout(() => {this.page2(this.num2)}, 1000);
          // 延时1s后刷新表格
        }
        else{
          // 后端请求数据失败
          this.$message({
            showClose: true,
            type: "error",
            message: res.data.msg,
          })
          // 返回失败信息
        }
      })
    },
    updatachoose2(row) {
      console.log(row)
      this.user_u.id = row.id
      this.user_u.name = row.name
      this.user_u.tel = row.tel
      this.user_u.pwd = row.pwd
      this.user_u.type = row.type
      this.user_p.pwd = row.pwd
      this.show2_2 = true
    },
    updata2(){
      this.$refs["user_u"].validate((valid) => {
        if (valid) {
          axios.put("api/user/admin", qs.stringify({
            id: this.user.id,
            name: this.user.name,
            tel: this.user.tel,
            pwd: this.user.pwd,
            id2: this.user_u.id,
            name2: this.user_u.name,
            tel2: this.user_u.tel,
            pwd2: this.user_u.pwd,
            type2: this.user_u.type,
            pwd3: this.user_p.pwd,
          })).then((res) => {
            if(res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "修改用户成功！",
              })

              this.show2_2 = false
              setTimeout(() => {this.page2(this.num2)}, 1000);
            }
            else{
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg,
              })
            }
          })
        }
      })
    },
    updatacancel2() {
      this.show2_2 = false
      setTimeout(() => {this.$refs["user_u"].resetFields()}, 200);
    },

    index3(index) {
      return this.size3 * (this.num3 - 1) + index + 1
    },
    change3(size) {
      this.size3 = size
      axios.get("api/article/info/page", {
        params: {
          size: size,
          type: 0
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.articles = res.data.data.records
          this.total3 = res.data.data.total
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "文章信息获取失败！",
          })
        }
      })
    },
    page3(currentPage, str = null) {
      axios.get("api/article/info/page", {
        params: {
          size: this.size3,
          num: currentPage,
          str: str,
          type: 0
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.articles = res.data.data.records
          this.num3 = currentPage
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "文章信息获取失败！",
          })
        }
      })
      if(str != null) {
        this.search = ""
      }
    },
    fmstat3(row) {
      if (row.stat === 0) {
        return "待审核"
      } else if (row.stat === 1) {
        return "审核通过"
      } else if (row.stat === 2) {
        return "审核失败"
      }
    },
    fmtype3(row) {
      if (row.type === 1) {
        return "防诈知识"
      } else if (row.type === 2) {
        return "真实案例"
      } else if (row.type === 3) {
        return "用户分享"
      }
    },
    add3() {
      this.$refs["article_a"].validate((valid) => {
        if (valid) {
          axios.post("api/article", qs.stringify({
            /*id: this.user.id,
            name: this.user.name,
            tel: this.user.tel,
            pwd: this.user.pwd,*/
            title: this.article_a.title,
            cont: this.article_a.cont,
            auid: this.user.id,
            time: this.getCurrentDate(),
            stat: 0,
            type: this.article_a.type,
          })).then((res) => {
            if(res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "添加文章成功！",
              })
              this.total3 += 1
              this.show3_1 = false
              setTimeout(() => {this.page3(this.num3)}, 1000);
            }
            else{
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg,
              })
            }
          })
        }
      })
    },
    delete3(row){
      axios.delete("api/article", {
        params: {
          /*id: this.user.id,
          name: this.user.name,
          tel: this.user.tel,
          pwd: this.user.pwd,*/
          id: row.arid,
        }
      }).then((res) => {
        if(res.data.code === '0') {
          this.$message({
            showClose: true,
            type: "success",
            message: "删除成功！",
          })
          setTimeout(() => {this.page3(this.num3)}, 1000);
        }
        else {
          this.$message({
            showClose: true,
            type: "error",
            message: res.data.msg,
          })
        }
      })
    },
    updatachoose3(row) {
      this.article_u.arid = row.arid
      this.article_u.title = row.title
      this.article_u.cont = row.cont
      this.article_u.auid = row.auid
      this.article_u.time = row.time
      this.article_u.type = row.type
      this.show3_2 = true
    },
    updata3(){
      this.$refs["article_u"].validate((valid) => {
        if (valid) {
          axios.put("api/article", qs.stringify({
            /*id: this.user.id,
            name: this.user.name,
            tel: this.user.tel,
            pwd: this.user.pwd,*/
            arid: this.article_u.arid,
            title: this.article_u.title,
            cont: this.article_u.cont,
            auid: this.article_u.auid,
            time: this.article_u.time,
            stat: 1,
            type: this.article_u.type,
          })).then((res) => {
            if (res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "修改文章成功！",
              })
              this.show3_2 = false
              setTimeout(() => {this.page3(this.num3)}, 1000);
            } else {
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg,
              })
            }
          })
        }
      })
    },
    updatacancel3() {
      this.show3_2 = false
      setTimeout(() => {this.$refs["article_u"].resetFields()}, 200);
    },

    index4(index) {
      return this.size4 * (this.num4 - 1) + index + 1
    },
    change4(size) {
      this.size4 = size
      axios.get("api/question/info/page", {
        params: {
          size: size
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.questions = res.data.data.records
          this.total4 = res.data.data.total
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "题目信息获取失败！",
          })
        }
      })
    },
    page4(currentPage, str = null) {
      axios.get("api/question/info/page", {
        params: {
          size: this.size4,
          num: currentPage,
          str: str
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.questions = res.data.data.records
          this.num4 = currentPage
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "题目信息获取失败！",
          })
        }
      })
      if(str != null) {
        this.search = ""
      }
    },
    fmtype4(row) {
      if (row.otype === 1) {
        return "单选题"
      } else if (row.otype === 2) {
        return "多选题"
      }
    },
    add4() {
      this.$refs["question_a"].validate((valid) => {
        if (valid) {
          axios.post("api/question", qs.stringify({
            /*id: this.user.id,
            name: this.user.name,
            tel: this.user.tel,
            pwd: this.user.pwd,*/
            cont: this.question_a.cont,
            qtype: 1,
            otype: this.question_a.otype,
            op1: this.question_a.op1,
            op2: this.question_a.op2,
            op3: this.question_a.op3,
            op4: this.question_a.op4,
            ans: this.question_a.ans,
          })).then((res) => {
            console.log(res.data)
            if(res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "添加题目成功！",
              })
              this.total4 += 1
              this.show4_1 = false
              setTimeout(() => {this.page4(this.num4)}, 1000);
            }
            else{
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg,
              })
            }
          })
        }
      })
    },
    delete4(row) {
      axios.delete("api/question/",{
        // 管理员后端专用url
        params: {
          /*id: this.user.id,
          name: this.user.name,
          tel: this.user.tel,
          pwd: this.user.pwd,*/
          id: row.id,
        }
      }).then((res) => { // 向后端请求删除用户
        if(res.data.code === '0') {
          // 后端请求数据成功
          this.$message({
            showClose: true,
            type: "success",
            message: "删除题目成功！",
          })
          // 显示删除成功消息
          this.total4 -= 1 // 与分页相关，总用户数减一
          if((this.total4 / 10) === this.num4 - 1){
            this.num4 -= 1
          } // 与分页相关，若删除的为该页最后一项数据，页面往前一页
          setTimeout(() => {this.page4(this.num4)}, 1000);
          // 延时1s后刷新表格
        }
        else{
          // 后端请求数据失败
          this.$message({
            showClose: true,
            type: "error",
            message: res.data.msg,
          })
          // 返回失败信息
        }
      })
    },
    updatachoose4(row) {
      this.question_u.id = row.id
      this.question_u.cont = row.cont
      this.question_u.otype = row.otype
      this.question_u.op1 = row.op1
      this.question_u.op2 = row.op2
      this.question_u.op3 = row.op3
      this.question_u.op4 = row.op4
      this.question_u.ans = row.ans
      this.show4_2 = true
    },
    updata4(){
      this.$refs["question_u"].validate((valid) => {
        if (valid) {
          axios.put("api/question/", qs.stringify({
            /*id: this.user.id,
            name: this.user.name,
            tel: this.user.tel,
            pwd: this.user.pwd,*/
            id: this.question_u.id,
            cont: this.question_u.cont,
            qtype: 1,
            otype: this.question_u.otype,
            op1: this.question_u.op1,
            op2: this.question_u.op2,
            op3: this.question_u.op3,
            op4: this.question_u.op4,
            ans: this.question_u.ans,
          })).then((res) => {
            console.log(res.data)
            if(res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "修改题目成功！",
              })

              this.show4_2 = false
              setTimeout(() => {this.page4(this.num4)}, 1000);
            }
            else{
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg,
              })
            }
          })
        }
      })
    },
    updatacancel4() {
      this.show4_2 = false
      setTimeout(() => {this.$refs["question_u"].resetFields()}, 200);
    },

    index5(index) {
      return this.size5 * (this.num5 - 1) + index + 1
    },
    change5(size) {
      this.size5 = size
      axios.get("api/record/info/page", {
        params: {
          size: size
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.records = res.data.data.records
          this.total5 = res.data.data.total
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "学习记录信息获取失败！",
          })
        }
      })
    },
    page5(currentPage, str = null) {
      axios.get("api/record/info/page", {
        params: {
          size: this.size5,
          num: currentPage,
          str: str
        }
      }).then((res) => {
        if (res.data.code === '0') {
          this.records = res.data.data.records
          this.num5 = currentPage
        } else {
          this.$message({
            showClose: true,
            type: "error",
            message: "学习记录信息获取失败！",
          })
        }
      })
      if(str != null) {
        this.search = ""
      }
    },
    fmres5(row) {
      if (row.res === 1) {
        return "正确"
      } else if (row.res === 0) {
        return "错误"
      }
    },
    add5() {
      this.$refs["record_a"].validate((valid) => {
        if (valid) {
          axios.post("api/record", qs.stringify({
            /*id: this.user.id,
            name: this.user.name,
            tel: this.user.tel,
            pwd: this.user.pwd,*/
            uid: this.record_a.uid,
            qid: this.record_a.qid,
            type: 1,
            res: this.record_a.res,
          })).then((res) => {
            if(res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "添加学习记录成功！",
              })
              if(res.data.data == null) {
                this.total5 += 1
              }
              this.show5_1 = false
              setTimeout(() => {this.page5(this.num5)}, 1000);
            }
            else{
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg,
              })
            }
          })
        }
      })
    },
    updatachoose5(row) {
      this.record_u.id = row.id
      this.record_u.uid = row.uid
      this.record_u.qid = row.qid
      this.record_u.res = row.res
      this.record_u.type = row.type
      this.show5_2 = true
    },
    updata5(){
      this.$refs["record_u"].validate((valid) => {
        if (valid) {
          axios.put("api/record", qs.stringify({
            /*id: this.user.id,
            name: this.user.name,
            tel: this.user.tel,
            pwd: this.user.pwd,*/
            id: this.record_u.id,
            uid: this.record_u.uid,
            qid: this.record_u.qid,
            type: this.record_u.type,
            res: this.record_u.res,
          })).then((res) => {
            if(res.data.code === '0') {
              this.$message({
                showClose: true,
                type: "success",
                message: "修改记录成功！",
              })

              this.show5_2 = false
              setTimeout(() => {this.page5(this.num5)}, 1000);
            }
            else{
              this.$message({
                showClose: true,
                type: "error",
                message: res.data.msg,
              })
            }
          })
        }
      })
    },
    updatacancel5() {
      this.show5_2 = false
      setTimeout(() => {this.$refs["record_u"].resetFields()}, 200);
    },
  }
}
</script>

<style scoped>
.manage {
  width: 100%;
  min-height: 666px;
}

.block {
  width: 80%;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  /*box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);*/
}

.box-card {
  background-color: #354e66;
}

.box-head {
  justify-content: center;
}

.m-title {
  color: #f9bf4b;
  font-size: 18px;
  font-weight: bold;
}

.el-menu-item {
  font-size: 17px;
}

/deep/ .el-card__body {
  padding: 0 !important;
}

.box-body {
  min-height: 460px;
  /*padding: 0 50px;*/
}

.el-col, .el-menu {
  min-height: 520px;
  height: 100%;
}

.right-button {
  margin-left: 20px;
}

.pag {
  padding: 20px 0;
}

/deep/ .number, /deep/ .btn-prev, /deep/ .btn-next {
  background-color: transparent !important;
  font-size: 15px;
}

.el-select {
  width: 100%;
}

/deep/ .dialog-footer .el-button--primary {
  margin-left: 40px !important;
}

/deep/ .demo-table-expand {
  font-size: 0;
}
/deep/ .demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
/deep/ .demo-table-expand .el-form-item {
  width: 100%;
}
</style>